<script setup lang="ts">
import moment from 'moment';

    
    defineProps<{data: any}>();

</script>
<template>
    <div class="comment-content">
        <div class="user-icon">
            <img :src="data.root_user_info?.avatar" />
            <!-- <span v-show="data.is_read === '0'">
                <i>new</i>
            </span> -->
        </div>
        <div class="comment-box">
            <div class="comment-left">
                <div class="comment-on">
                    <span><a :href="'/u/' + data.root_user_info?.yhnm" target="_blank">{{data.root_user_info?.nickName}}</a></span>
                </div>
                <div class="comment-content">
                    <span v-html="data.comment_info?.reply_content ? '回复：' + data.comment_info.comment_content : '评论了你的文章'"></span>
                </div>
                <div class="comment-down">
                    <span class="time">{{ moment(data.remind_time).startOf('minute').fromNow() }}</span>
                </div>
            </div>
            <div class="comment-right">
                <a :href="'/blog/detail/' + data.blog_info?.wznm" target="_blank"><img :src="data.blog_info?.cover"/></a>
            </div>
        </div>            
    </div>
</template>

<style lang="less" scoped>
    .comment-content {
        display: flex;
        .user-icon {
            margin-top: 2px;
            width: 40px;
            height: 40px;
            position: relative;
            span {
                font-size: .8em;
                line-height: 1.2;
                padding: 0.1em 0.4em;
                min-width: 0.8em;
                min-height: 0.8em;
                display: inline-block;
                vertical-align: 0.1em;
                border-radius: 50px;
                background: var(--this-bg);
                color: var(--this-color);
                top: 5px;
                --this-color: #fff;
                text-align: center;
                --this-bg: #fe3459;
                z-index: 1;
                position: absolute;
                margin-left: -25px;
                margin-top: -6px;
            }
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: inline-block!important;
                overflow: hidden;
            }
        }
        .comment-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            .comment-left {
                margin-left: 6px;
                .comment-on {
                    span, a {
                        color: #000;
                        font-size: 13px;
                    }
                    a:hover {
                        color:#1890FE;
                    }
                }
                .comment-content {
                    span {
                        font-size: 12px;
                        width: 175px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                .comment-down {
                    span {
                        font-size: 10px;
                    }
                }
            }
            .comment-right {
                img {
                    width: 40px;
                    height: 45px;
                    border-radius: 10px;
                }
            }
        }
    }
</style>